<template>
  <div class="hospital">
    <!--左侧-->
    <div class="menu">
      <div class="top">
        <el-icon><HomeFilled/></el-icon>
        <span>/ 医院信息</span>
      </div>
      <el-menu
          class="el-menu-vertical-demo"
          router
          :default-active="$route.path"
          text-color="back"
          @select="handleSelect"
      >
        <el-menu-item index="/hospital/register">
          <el-icon><Calendar /></el-icon>
          <span>预约挂号</span>
        </el-menu-item>
        <el-menu-item index="/hospital/detail">
          <el-icon><Document /></el-icon>
          <span>医院详情</span>
        </el-menu-item>
        <el-menu-item index="/hospital/notice">
          <el-icon><Notification /></el-icon>
          <span>预约通知</span>
        </el-menu-item>
        <el-menu-item index="/hospital/close">
          <el-icon><InfoFilled /></el-icon>
          <span>停诊信息</span>
        </el-menu-item>
        <el-menu-item index="/hospital/search">
          <el-icon><Setting /></el-icon>
          <span>查询/取消</span>
        </el-menu-item>
      </el-menu>
    </div>
    <!--右侧内容区-->
    <div class="content">
      <router-view/>
    </div>
  </div>
</template>
<script setup lang="ts">
import {onMounted} from 'vue'
import {Calendar, Document, HomeFilled, InfoFilled, Notification, Setting} from "@element-plus/icons-vue";
import {useRoute, useRouter} from "vue-router";
import useDetailStore from "@/store/modules/hospitalDetail.ts";
//获取当前路由
const $route = useRoute()
const $router = useRouter()
const detailStore = useDetailStore()
onMounted(()=>{
  //获取医院详情
  detailStore.getHospital($route.query.hoscode as string)
  //获取医院科室数据
  detailStore.getDepartment($route?.query?.hoscode as string)
})

const handleSelect = (path:string)=>{
  console.log(path)
  $router.push({
    path,
    query:{
      hoscode:$route.query.hoscode
    }
  })
}
</script>

<style scoped lang="scss">
.hospital{
  display: flex;
  .menu{
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    .top{
      color: #7f7f7f;
    }
  }
  .content{
    flex: 8;
  }
}
</style>
